<template>
  <div class="func">
    <p class="attr">
      显示内容
    </p>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.goodsTitleShow">
        商品标题
      </el-checkbox>
      <el-color-picker v-model="pageConfigModel.goodsTitleColor" />
      <span>{{ pageConfigModel.goodsTitleColor }}</span>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.goodsPriceShow">
        商品价格
      </el-checkbox>
      <el-color-picker v-model="pageConfigModel.goodsPriceColor" />
      <span>{{ pageConfigModel.goodsPriceColor }}</span>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.goodsOriginalPriceShow">
        划线原价
      </el-checkbox>
      <el-color-picker v-model="pageConfigModel.goodsOriginalPriceColor" />
      <span>{{ pageConfigModel.goodsOriginalPriceColor }}</span>
    </div>
    <div class="adjust-item">
      <el-checkbox v-model="pageConfigModel.goodsSaleNumShow">
        商品销量
      </el-checkbox>
      <el-color-picker v-model="pageConfigModel.goodsSaleNumColor" />
      <span>{{ pageConfigModel.goodsSaleNumColor }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {WritableComputedRef} from "vue";
import {
  goodsContentSettingPageConfig,
  IGoodsContentSettingPageConfig
} from "@/views/activity/actApp/components/default/operationComponents/goodsContentSetting/index";

const props = withDefaults(defineProps<{
  pageConfig: IGoodsContentSettingPageConfig
}>(), {
  pageConfig: () => ({
    ...goodsContentSettingPageConfig
  })
})
const emits = defineEmits<{
  (e: "update:page-config", value: IGoodsContentSettingPageConfig):void;
}>()

const pageConfigModel: WritableComputedRef<IGoodsContentSettingPageConfig> = computed({
  get() {
    return props.pageConfig
  },
  set(newValue) {
    emits("update:page-config", newValue)
  }
})
</script>

<style scoped lang="scss">
@use "../../styles/operation";
</style>
